<template>
  <div>
    <c-r-m-list-head title="回款管理" placeholder="请输入回款编号" @on-handle="listHeadHandle" @on-search="crmSearch"
      main-title="新建回款" :crm-type="crmType">
    </c-r-m-list-head>
    <div v-empty="!crm.receivables.index" xs-empty-icon="nopermission" xs-empty-text="暂无权限" class="crm-container">
      <c-r-m-table-head ref="crmTableHead" :crm-type="crmType" @filter="handleFilter" @handle="handleHandle"
        @scene="handleScene"></c-r-m-table-head>
      <el-table class="n-table--border" id="crm-table" v-loading="loading" :data="list" :height="tableHeight" stripe
        border highlight-current-row style="width: 100%" :cell-style="cellStyle" @row-click="handleRowClick"
        @header-dragend="handleHeaderDragend" @selection-change="handleSelectionChange">
        <el-table-column show-overflow-tooltip type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column v-for="(item, index) in fieldList" :key="index" show-overflow-tooltip :fixed="index==0"
          :prop="item.prop" :label="item.label" :width="item.width" :formatter="fieldFormatter">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{scope.column.label}}</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="check_status_info" label="状态" :resizable="false" width="100"
          align="center" fixed="right">
          <template slot="header" slot-scope="scope">
            <div class="table-head-name">{{scope.column.label}}</div>
          </template>
          <template slot-scope="scope">
            <div class="status_button" :style="getStatusStyle(scope.row.check_status)">
              {{scope.row.check_status_info}}
            </div>
          </template>
        </el-table-column>
        <el-table-column>
        </el-table-column>
        <el-table-column fixed="right" width="36">
          <template slot="header" slot-scope="slot">
            <img src="@/assets/img/t_set.png" @click="handleTableSet" class="table-set" />
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination class="p-bar" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="pageSizes" :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail :visible.sync="showDview" :crmType="rowType" :id="rowID" @handle="handleHandle" class="d-view">
    </c-r-m-all-detail>
    <fields-set :crmType="crmType" @set-success="setSave" :dialogVisible.sync="showFieldSet"></fields-set>
  </div>
</template>

<script>
  import CRMAllDetail from '@/views/customermanagement/components/CRMAllDetail'
  import table from '../mixins/table'

  export default {
    /** 客户管理 的 回款列表 */
    name: 'moneyIndex',
    components: {
      CRMAllDetail
    },
    mixins: [table],
    data() {
      return {
        crmType: 'receivables'
      }
    },
    computed: {},
    mounted() {},
    methods: {
      /** 通过回调控制style */
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (
          column.property === 'number' ||
          column.property === 'customer_id' ||
          column.property === 'contract_id'
        ) {
          return {
            color: '#3E84E9',
            cursor: 'pointer'
          }
        } else {
          return ''
        }
      }
    }
  }

</script>

<style lang="scss" scoped>
  @import '../styles/table.scss';

</style>
